import React, { memo, useState } from "react";
import { useHistory } from "react-router-dom";
import { Menu, Switch, Divider } from "antd";
import {
  UserOutlined,
  UnorderedListOutlined,
  SolutionOutlined,
} from "@ant-design/icons";
import { Leftmenuwrap } from "./style";

// const { SubMenu } = Menu;
export default memo(function Leftmenu() {
  const history = useHistory();
  const [theme, setTheme] = useState("dark");

  const changeTheme = (value) => {
    setTheme(value ? "light" : "dark");
  };

  return (
    <Leftmenuwrap>
      <h2>欢迎来到管理界面</h2>
      <Divider type="vertical" />
      <Switch onChange={changeTheme} /> Change Style
      <br />
      <br />
      <Menu
        style={{ width: 256 }}
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        theme={theme}
      >
        <Menu.Item
          key="1"
          icon={<UserOutlined />}
          onClick={(e) => history.push("/adminpage/useradminpage")}
        >
          用户管理
        </Menu.Item>
        <Menu.Item
          key="4"
          icon={<UnorderedListOutlined />}
          onClick={(e) => history.push("/adminpage/rightadmin")}
        >
          权限管理
        </Menu.Item>
        <Menu.Item
          key="2"
          icon={<SolutionOutlined />}
          onClick={(e) => history.push("/adminpage/blogadminpage")}
        >
          博客管理
        </Menu.Item>
        <Menu.Item
          key="3"
          icon={<UnorderedListOutlined />}
          onClick={(e) => history.push("/adminpage/blogtypeadmin")}
        >
          博客类别管理
        </Menu.Item>
        <Menu.Item
          key="5"
          icon={<UnorderedListOutlined />}
          onClick={(e) => history.push("/login")}
        >
          退出
        </Menu.Item>
      </Menu>
    </Leftmenuwrap>
  );
});
